<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EcmaScript6</title>
</head>
<body>

<span id="es6module"></span>
<script>
    //http://es6.ruanyifeng.com/#docs/let
    /**
     {
     let a = 10;
     var b = 20;
     }

     //console.log(b);//20
     //console.log(a);//Uncaught ReferenceError: a is not definedat EcmaScript6.html:17

     for (let i = 0; i < 10; i++) {
     console.log(i);
     }
     console.log('循环后的i：');
     console.log(i);*/

    /**
     var a = [];
     for (var i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        }
    }


     var b = [];
     for (let c = 0; c < 10; c++) {
        b[c] = function () {
            console.log(c);
        }
    }

     for (let i = 0; i < 3; i++) {
        let i = 9;
        console.log(i);
    }
     */

    /**
     * console.log(foo);//undefined
     var foo = 1;


     console.log(f);//Uncaught ReferenceError: f is not defined
     let f = 2;*/

    /**
     // 暂时性死区 !!!!
     //     上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

     //     ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

     //     总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

     var tmp = 'yes';
     if (true) {
        //tmp = 'abc';//Uncaught ReferenceError: tmp is not defined
        //console.log(tmp);//Uncaught ReferenceError: tmp is not defined
        let tmp = 'no';
        console.log(tmp);
    }

     console.log(tmp);*/


    /**
     * //var a = '';
     let a = '1';
     var a = '11';
     console.log(a);
     var aa = function () {

        let a = '2';
        let a = '3';
        console.log(a);
    }

     aa();
     console.log(a);*/
    /**

     // ES5 环境
     function f() {
        console.log('I am outside!');
     }

     (function () {
        function f() {
            console.log('I am inside!');
        }

        if (false) {
        }
        f();
    }());



     function f() {
     console.log('I am outside!');
     }

     (function () {
     if (false) {
     // 重复声明一次函数f
     function f() {
     console.log('I am inside!');
     }
     }

     f();
     }());*/


    //let [a,b,c]=[1, 2, 3];
    //console.log(a);//1
    //console.log(b);//2
    //console.log(c);//3

    //let [a,[[b],c]]=[1, [[2], 3]];
    //console.log(a);//1
    //console.log(b);//2
    //console.log(c);//3

    //let [,,third]=["aaa", "bbb", "ccc"];
    //console.log(third);//"ccc"

    //let [x,,z]=[1, 2, 3];
    //console.log(x, third, z);//1 "ccc" 3

    //let [head, ...tail]=[1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
    //console.log(head, tail);//1 [2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]

    //let [x,y,...z]=['a', , ];
    //console.log(x, y, z);//a undefined []

    //let [x,y,...z]=['a', , [1, 2, 3], 4, 5];
    //console.log(x, y, z);//a undefined [[1,2,3],4,5]

    //let [a,b]=[];
    //console.log(a, b);//undefined undefined
    //let [a,b]=[1];
    //console.log(a, b);// 1 undefined
    //let [a,b]=[1, 2, 3];
    //console.log(a, b);// 1 2

    //let [f]=undefined;//Uncaught SyntaxError: Identifier 'foo' has already been declared

    /*let [x,y,z]=new Set(['a', 'b', 'c']);

     //let a = new Set(`123`);//Set(3) {"1", "2", "3"}

     console.log(x, y, z);//a b c

     let {foo}={foo: '123'};

     console.log(foo);//123*/

    //var {x=3}={};
    //console.log(x);//3;
    //var {y=3}={y:1};
    //console.log(y);//1


    /**
     * //箭头操作符 写回调
     let cb = function (cb) {
        let a = 1;
        cb(a);
    }

     cb(function (i) {
        console.log('传统方法写cb回调值：' + i);
    });

     cb(i => console.log('用箭头操作符 console.log写cb回调值：'+i));*/


    /**
     * //es6字符串模板
    //产生一个随机数
    function es6FnStrModule() {
        return '{}中还可以调用方法，可写任何js表达式！';
    }
    var num = Math.random();

    let obj = {
        name: 'es6字符串模板！'
    }
    //将这个数字输出到console
    console.log(num);
    let es6StrModuleString = `your num is ${num}好牛逼好牛逼啊
     好牛逼好牛逼\`${obj.name}，反引号\`部分可正常储存在变量、dom中！模板字符串之中还能调用函数。${es6FnStrModule()}`;
    console.log(es6StrModuleString);

    document.querySelector('#es6module').innerHTML = es6StrModuleString;


    //console.log(`${{}}`);//[object Object]
    //console.log(`${nullobj}`); //Uncaught ReferenceError: nullobj is not defined*/

    const tmpl = addrs =>
    `
    <table>
        ${addrs.map(addr = > `
          <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
    `;

</script>
</body>
</html>